import React, { useState, useEffect } from "react";

// Components
import { Container } from "reactstrap";
import { Card, CardBody, Media, Table, Progress, Row, Col,ModalHeader,ModalBody,ModalFooter, Input, FormGroup } from "reactstrap";
import MultitypeChart from "../../../components/chart/MultitypeChart.js";
import { DatePicker, Select } from 'antd';
import { Modal,Button} from "react-bootstrap";
import dayjs from 'dayjs';
import {toast} from 'react-toastify';

// Services
import AuthService from "../../../services/auth.service.js";
import userService from "../../../services/user.service";
import companyService from "../../../services/companies.service.js";
import assessmentService from "../../../services/assessment.service.js";
import teamsService from "../../../services/teams.service.js";

// Assets
import defaultProfileVector from "../../../assets/img/vectors/Group_708.svg";
import imgCoin from "../../../assets/img/icons/coin.svg";
import dashboard_1 from "../../../assets/img/photos/dashboard_1.png";
import dashboard_2 from "../../../assets/img/photos/dashboard_2.png";
import dashboard_3 from "../../../assets/img/photos/dashboard_3.png";
import dashboard_4 from "../../../assets/img/photos/dashboard_4.png";
import dashboard_5 from "../../../assets/img/photos/dashboard_5.png";
import dashboard_6 from "../../../assets/img/photos/dashboard_6.png";
import dashboard_7 from "../../../assets/img/photos/dashboard_7.png";

toast.configure();


/*
* DASHBOARD
*
* The following dashboard will include
*
* Welcome Message - (COMPLETED)
* Credit Balance - (COMPLETED)
* TODO: Show current status of the Assessments (Eg: open, pending, completed) - (OPEN)
* TODO: Latest Results of the final assessment completed - (OPEN)
*
* */

const Default = (props) => {
    // components
    const { RangePicker } = DatePicker;
    // Get current user from local storage if exist
    var currentUser = AuthService.getCurrentUser();

    // Get current user company from local storage if exist
    var company = AuthService.getCurrentCompany();

    // Push user out to the login page if login session not found
    if (currentUser == null || currentUser == undefined) {
        props.history.push("/");
        window.location.reload();
    }
    /*
    * Setting up User & Company
    *
    * user & organization variables are set here to be used later
    *
    * */
    const [organizations, setOrganisation] = useState("");
    const [UserName, setUserName] = useState("");
    const [OpenNumber, setOpenNumber] = useState(0);
    const [CompletedNumber, setCompletedNumber] = useState(0);
    const [Inprogress, setInprogress] = useState(0);
    useEffect(() => {
        if (currentUser !== null) {
            if (organizations.length === 0) {
                AuthService.getCompanyNames(currentUser.id).then((response) => {
                    if (response !== null) {
                        setUserName(currentUser.email);
                        setOrganisation(response);
                    }
                });
            }
        } else {
            setUserName(company.CompanyName);
        }
    });

    /*
    * User Credit Fetching
    *
    * user credits are based on credits allocated to a company
    * API will return the credits depending on the user role
    *
    * */
    const [credits, setCredits] = useState("");
    // Assessment Type & Total Usage datas
    const [CompanyOptionsData, setCompanyOptionsData] = useState([]);
    const [CompanySelectedOption, setCompanySelectedOption] = useState('');
    const [AssessmentCompletePercentTableDatas, setAssessmentCompletePercentTableDatas] = useState([]);
    const [AssessmentCompleteStartTime, setAssessmentCompleteStartTime] = useState(dayjs().add(-1, "M").format('YYYY-MM-DD'));
    const [AssessmentCompleteEndTime, setAssessmentCompleteEndTime] = useState(dayjs().format('YYYY-MM-DD'));

    // share弹窗数据
    const [firstNameVal,setFirstNameVal]= useState('');
    const [lastNameVal,setLastNameVal]= useState('');
    const [emailAddressVal,setEmailAddressVal]= useState('');
    const [companyNameVal,setCompanyNameVal]= useState('');
    const [personVal,setPersonVal]= useState('');
    const [Report_Id,setReport_Id]= useState('');
    const [textAreaVal,setTextAreaVal]= useState(``);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = (Report_Id) => {
      setIsModalOpen(true);
      setFirstNameVal('');
      setLastNameVal('');
      setEmailAddressVal('');
      setCompanyNameVal('');
      setPersonVal('');
      setTextAreaVal(`Hey there,

I've just completed an HR capability analysis through AHRI (Australian Human Resources Institute) and received some great insights into where I'm at and where I can focus my development to grow my HR capability and career.

I found this AHRI member benefit really helpful, and I thought you and/or your teammates might too.

Visit the website at ahriassessments.app

${currentUser.FirstName}`);
setReport_Id(Report_Id);
};

    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 输入框数据
    const onChangefirstNameVal = (e) =>{
        setFirstNameVal(e.target.value);
    }
    const onChangelastNameVal = (e) =>{
        setLastNameVal(e.target.value);
    }
    const onChangeemailAddressVal = (e) =>{
        setEmailAddressVal(e.target.value);
    }
    const onChangecompanyNameVal = (e) =>{
        console.log(e.target.value);
        setCompanyNameVal(e.target.value);
    }
    const onChangetextAreaVal = (e) =>{
        console.log(e.target.value);
        setTextAreaVal(e.target.value);
    }
    const onChangepersonVal = (e) =>{
        setPersonVal(e.target.value);
    }

    const share = () => {
        var firstName = firstNameVal;
        var lastName = lastNameVal;
        var emailAddress = emailAddressVal;
        var companyName = companyNameVal;
        var person = personVal;
        var textArea = textAreaVal;
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if(firstName != ''&&lastName != ''&&emailAddress != ''&&companyName != ''&&person != '0'&&textArea != ''&& emailRegex.test(emailAddress)){
            assessmentService.AddAssessmentResultShare(Report_Id,firstName,lastName,emailAddress,companyName,person,textArea,currentUser.FirstName,currentUser.LastName).then((response) => {
                if(response.Status == "Success"){
                    setIsModalOpen(false);
                    toast.success("Successfully shared!", {
                        position: "top-center",
                        autoClose: 5000,
                        hideProgressBar: false,
                        closeOnClick: true,
                        pauseOnHover: true,
                        draggable: true,
                        progress: undefined,
                        theme: "colored",
                    });

                }else{
                    setIsModalOpen(false);
                    toast.error(response.Message, {
                        position: "top-center",
                        autoClose: 5000,
                        hideProgressBar: false,
                        closeOnClick: true,
                        pauseOnHover: true,
                        draggable: true,
                        progress: undefined,
                        theme: "colored",
                    });
                }
            }).catch((e) => {
                console.log(e);
            });
        }else{
            if(firstName != ''&&lastName != ''&&emailAddress != ''&&companyName != ''&&person != '0'&&textArea != ''&& !emailRegex.test(emailAddress)){
                toast.error("Email address is not valid!", {
                    position: "top-center",
                    autoClose: 5000,
                    hideProgressBar: false,
                    closeOnClick: true,
                    pauseOnHover: true,
                    draggable: true,
                    progress: undefined,
                    theme: "colored",
                });
            }else{
                toast.error("Please fill in all the fields!", {
                    position: "top-center",
                    autoClose: 5000,
                    hideProgressBar: false,
                    closeOnClick: true,
                    pauseOnHover: true,
                    draggable: true,
                    progress: undefined,
                    theme: "colored",
                });
            }
        }
    }
    // Clients Table datas
    const [ClientsTableDatas, setClientsTableDatas] = useState([]);
    const [ClientsTableStartTime, setClientsTableStartTime] = useState(dayjs().add(-1, "M").format('YYYY-MM-DD'));
    const [ClientsTableEndTime, setClientsTableEndTime] = useState(dayjs().format('YYYY-MM-DD'));

    // Assessment Credits datas
    const [CreditsNumber, setCreditsNumber] = useState(0);

    // chartdatas
    const [chartdatas, setChartdatas] = useState({
        labels: ["Jan 23", "Feb 23", "Mar 23", "Apr 23", "May 23", "Jun 23", "Jul 23", "Aug 23", "Sep 23", "Oct 23", "Nov 23", "Dec 23"],
        datasets: [
            // {
            //     type: 'line',
            //     label: 'Dataset 1',
            //     borderColor: '#F0AD4E',
            //     fill: false,
            //     data: [10, 20, 30, 40, 50, 30, 20, 30, 40, 60, 45, 64],
            //     tension: 0.4,
            //     pointStyle: 'circle',
            //     pointRadius: 5,
            //     pointBorderColor: '#48BF73',
            //     borderWidth: 4
            // },
            // {
            //     type: 'bar',
            //     label: 'Dataset 3',
            //     backgroundColor: 'rgba(81,147,234,0.9)',
            //     data: [50, 60, 22, 45, 66, 10, 20, 30, 40, 40, 62, 84],
            //     with: '20'
            // },
            // {
            //     type: 'line',
            //     label: 'Dataset 2',
            //     backgroundColor: 'rgba(210,239,220,0.5)',
            //     data: [20, 50, 40, 10, 60, 10, 20, 30, 40, 50, 84, 12],
            //     borderColor: '#48BF73',
            //     tension: 0.4,
            //     fill: true,
            //     pointStyle: 'circle',
            //     pointRadius: 0.1,
            //     borderWidth: 1
            // },
        ],
    });

    // New Registrations data
    const [RegistrationsNumber, setRegistrationsNumber] = useState(0);

    let userId = currentUser.id;
    useEffect(() => {
        if(window.sessionStorage.getItem('resultData')){
            if(currentUser.roleName !== "team-member" && currentUser.roleName !== "team-leader"){
                let resultData = JSON.parse(window.sessionStorage.getItem('resultData'))[0]
                assessmentService.GetAllAssessmentDetails().then(assessment =>{
                    
                        if(currentUser.id == resultData.UserId){
                            props.history.push({
                                pathname: "/AssessmentResult",
                                state: { Score: resultData.Score, Data: resultData, questionsList: assessment.filter(x => x.AssessmentId == resultData.AssessmentId)[0]},
                            });
                        }
                })
            }else{
                if(currentUser.report_access==true){
                    props.history.push({pathname: "/ResultDashboard"});
                }
            }
        }
        if(currentUser.roleName === "assessor"){
            props.history.push({
                pathname: "/Assessments",
            });
        }
        var currentUserId = currentUser.id;
        assessmentService.GetAllAssessmentList(userId).then((data) => {
            return data.filter((assessment) => {
                if(!(currentUser.roleName == 'company'||currentUser.roleName == 'super-admin'||currentUser.roleName == 'partner')){
                    return assessment.UserId === userId
                }else{
                    return assessment
                }
            })
        }).then((data) => {
            setOpenNumber(data.filter((assessment) => {
                return assessment.Status === 'OPEN'
            }).length)
            setCompletedNumber(data.filter((assessment) => {
                return assessment.Status === 'COMPLETED'
            }).length);
            setInprogress(data.filter((assessment) => {
                return assessment.Status === 'IN PROGRESS'
            }).length);
        })

        const GetAssessmentCompletePercent = (userId, companyId, startDate, endDate) => {
            assessmentService.GetAssessmentCompletePercent(userId, companyId, startDate, endDate).then((data) => {
                setAssessmentCompletePercentTableDatas(data)
            })
        }
        const GetCompanyListByPartnerId = () => {
            let partnerId = '';
            switch (currentUser.roleName) {
                case "super-admin":
                    partnerId = 0;
                    break;
                case "partner":
                    partnerId = currentUser.partner_id;
                    break;
                default:
                    break;
            }
            if (partnerId !== "") {
                companyService.GetCompanyListByPartnerId(partnerId).then((response) => {
                    console.log(response);
                    if (response.companyDetails == [] || response.companyDetails == null) {
                    } else {
                        if (response.companyDetails.length > 1) {
                            let companyDatas = [{ value: "Client", label: "Client", disabled: true },
                            { value: 0, label: "All Clients" }];
                            response.companyDetails.map(x => {
                                companyDatas.push({ value: x.Id, label: x.CompanyName })
                            });
                            setCompanyOptionsData(companyDatas);
                            setCompanySelectedOption(companyDatas[1].value);
                            GetAssessmentCompletePercent(userId, companyDatas[1].value, dayjs().add(-1, "M").format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD'));
                        } else {
                            let companyDatas = [{ value: "Client", label: "Client", disabled: true }];
                            response.companyDetails.map(x => {
                                companyDatas.push({ value: x.Id, label: x.CompanyName })
                            });
                            setCompanyOptionsData(companyDatas);
                            setCompanySelectedOption(companyDatas[1].value);
                            GetAssessmentCompletePercent(userId, companyDatas[1].value, dayjs().add(-1, "M").format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD'));
                        }
                    }
                })
            } else if (currentUser.roleName == 'company' || currentUser.roleName == 'team-leader') {
                AuthService.GetCompanyLogoById(currentUser.company_id).then(
                    (response) => {
                        let companyDatas = [{ value: "Client", label: "Client", disabled: true }, { value: currentUser.company_id, label: JSON.parse(sessionStorage.getItem('companyLogoInfo')).companyName }];
                        setCompanyOptionsData(companyDatas);
                        setCompanySelectedOption(companyDatas[1].value);
                        GetAssessmentCompletePercent(userId, companyDatas[1].value, dayjs().add(-1, "M").format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD'));
                    }
                );
                
            }

        }

        const GetCompanyCreditUsed = () => {
            if (currentUser.roleName == 'super-admin' || currentUser.roleName == 'partner') {
                companyService.GetCompanyCreditUsed(userId, dayjs().add(-1, "M").format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')).then((response) => {
                    if (response !== null) {
                        if (response.length > 0) {
                            setClientsTableDatas(response)
                        }
                    }
                })
            }
        }

        const GetCompanyCreditTotal = () => {
            assessmentService.GetAssessmentCredits(userId).then((response) => {
                if (response !== null) {
                    setCreditsNumber(response.Message);
                }
            })
        }

        const GetNewRegistrations = () => {
            userService.GetNewRegistrations(userId).then((response) => {
                setRegistrationsNumber(response.Message);
            })
        }
        const GetTeamPerformance = () => {
            teamsService.GetTeamPerformance(userId).then((response) => {
                if (response !== null && response.length > 0) {
                    const data = {
                        labels: [],
                        datasets: [
                            // {
                            //     type: 'line',
                            //     label: 'Dataset 1',
                            //     borderColor: '#F0AD4E',
                            //     borderWidth: 2,
                            //     fill: false,
                            //     data: [],
                            //     tension: 0.4,
                            //     pointStyle: 'circle',
                            //     pointRadius: 0.1,
                            //     borderWidth: 4
                            // },
                            // {
                            //     type: 'bar',
                            //     label: 'Dataset 3',
                            //     backgroundColor: 'rgba(81,147,234,0.9)',
                            //     data: [],
                            //     with: '20'
                            // },
                            // {
                            //     type: 'line',
                            //     label: 'Dataset 2',
                            //     backgroundColor: 'rgba(210,239,220,0.5)',
                            //     data: [],
                            //     borderColor: '#48BF73',
                            //     borderWidth: 2,
                            //     tension: 0.4,
                            //     fill: true,
                            //     pointStyle: 'circle',
                            //     pointRadius: 0.1,
                            //     borderWidth: 1
                            // },
                        ],
                    };
                    response.map((item, index) => {
                        let value = [];
                        item.DetailList.map(i => {
                            value.push(i.TotalMark)
                        })
                        data.datasets.push({
                            type: 'line',
                            label: item.TeamName,
                            borderColor: '#F0AD4E',
                            borderWidth: 2,
                            fill: false,
                            data: value,
                            tension: 0.4,
                            pointStyle: 'circle',
                            pointRadius: 0.1,
                            borderWidth: 4
                        })
                    })
                    response[0].DetailList.map((item, index) => {
                        data.labels.push(item.Month);
                    })
                    console.log(data);
                    setChartdatas(data);
                }

            })
        }

        const creditDetail = () => {
            var creditBalance = userService.GetCreditDetail(currentUserId);

            var balance = creditBalance
                .then((response) => {
                    return response;
                })
                .then((data) => {
                    setCredits(data);
                })
                .catch((e) => {
                    console.log(e);
                });
        };

        if(window.sessionStorage.getItem('results') == 'true'&&(currentUser.roleName == 'team-member'|| currentUser.roleName === "team-leader")&&currentUser.report_access==true){
            props.history.push("/ResultDashboard");
        }else if(window.sessionStorage.getItem('results') == 'true'&&(currentUser.roleName == 'team-member'|| currentUser.roleName === "team-leader")&&currentUser.report_access==false){
            toast.error("Assessment report not ready to be shared", {
                position: "top-center",
                autoClose: 5000,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                progress: undefined,
                theme: "colored",
            });
        }
        if(currentUser.IsCompleteProfile == false){
            props.history.push("/userProfile");
        }

        GetTeamPerformance();
        GetNewRegistrations();
        GetCompanyCreditUsed();
        GetCompanyCreditTotal();
        GetCompanyListByPartnerId();
        creditDetail();
        document.documentElement.style.setProperty('--theme-color','red')
        // console.log(document.documentElement.style.setProperty('--theme-color')); 
    }, []);

    /*
    * !! NOT IN USE !!
    *
    * */
    const handleChange = (e) => {
        var companyId = e.target.value;
        if (companyId !== "") {
            AuthService.getCompanyDetailsByCompanyId(companyId).then((response) => {
                if (response !== null) {
                    // setCompanyDetail(response);
                    window.location.href =
                        "http://localhost:3000/dashboard/default?CompanyGuid=" + companyId;
                }
            });
        }
    };

    const ClientsTableDatehandleChange = (dateStrings) => {
        companyService.GetCompanyCreditUsed(userId, dateStrings[0], dateStrings[1]).then((response) => {
            if (response !== null) {
                if (response.length > 0) {
                    setClientsTableDatas(response)
                }
            }
        })

    }
    const AssessmentCompleteDatehandleChange = (dateStrings) => {
        setAssessmentCompleteStartTime(dateStrings[0]);
        setAssessmentCompleteEndTime(dateStrings[1]);
        assessmentService.GetAssessmentCompletePercent(userId, CompanySelectedOption, dateStrings[0], dateStrings[1]).then((data) => {
            setAssessmentCompletePercentTableDatas(data);
        })

    }

    const AssessmentCompleteValuehandleChange = (val) => {
        setCompanySelectedOption(val)
        assessmentService.GetAssessmentCompletePercent(userId, val, AssessmentCompleteStartTime, AssessmentCompleteEndTime).then((data) => {
            setAssessmentCompletePercentTableDatas(data);
        })
    }

    return (
        <div id="dashboard_div">
                        <Modal 
                show={isModalOpen}
                onHide={handleCancel}
                backdrop="static"
                centered
                size="md"
            >
                 <ModalHeader  style={{border: 'none',paddingLeft:"3rem",marginTop:"0.7rem",paddingRight:"3rem"}}>
                    <div style={{color:"#0071B8",fontSize:"1.3rem",fontWeight:"bold",marginBottom:"0"}}>SHARE WITH A COLLEAGUE OR PEER!</div>
                </ModalHeader>
                <hr className="mx-auto"
                    style={{display: 'block',width: '84%',margin:'0',border: '2px #0071B8 solid'}}
                />
                <ModalBody style={{padding:"1rem 1.8rem 0 1.8rem",fontSize:"11px"}}>
                   <p style={{color:"#4A4C57",fontSize:"15px",padding: '0 20px'}}>Thank you for sharing the Australian HR Capability Analysis.</p>
                   <p style={{color:"#4A4C57",fontSize:"15px",padding: '0 20px'}}>NOTE: Your actual results are NOT being shared! You are simply letting someone else know about this self-assessment. Aggregate data from this challenge will provide an important insight into the Human Resource capability in Australia. You can edit your email to each person so you know exactly what is being sent.</p>
                   <p style={{color:"#4A4C57",fontSize:"15px",padding: '0 20px',fontWeight:'bold'}}>The richer the data - the greater the insights!</p>
                   <p style={{color:"#4A4C57",fontSize:"15px",padding: '0 20px'}}>Please send this on to peers, colleagues, team members or your manager.</p>
                    <hr className="mx-auto"
                    style={{display: 'block',width: '92%',margin:'0',border: '2px #0071B8 solid',marginBottom:"2rem"}}
                    />
                    <Row style={{padding: '0 4%'}}>
                        <Col xs={6} md={6}>
                            <FormGroup>
                                <Input
                                    className="form-control ShareModal_input"
                                    bsSize="lg"
                                    type="text"
                                    name="FirstName"
                                    placeholder="First Name"
                                    value={firstNameVal}
                                    onChange={onChangefirstNameVal}
                                />
                            </FormGroup>
                        </Col>
                        <Col xs={6} md={6}>
                            <FormGroup>
                                <Input
                                    className="form-control ShareModal_input"
                                    bsSize="lg"
                                    type="text"
                                    name="lastName"
                                    placeholder="Last Name"
                                    value={lastNameVal}
                                    onChange={onChangelastNameVal}
                                />
                            </FormGroup>
                        </Col>
                        <Col xs={6} md={6}>
                            <FormGroup>
                                <Input
                                    className="form-control ShareModal_input"
                                    bsSize="lg"
                                    type="text"
                                    name="emailAddress"
                                    placeholder="Email Address"
                                    value={emailAddressVal}
                                    onChange={onChangeemailAddressVal}
                                />
                            </FormGroup>
                        </Col>
                        <Col xs={6} md={6}>
                            <FormGroup>
                                <Input
                                    className="form-control ShareModal_input"
                                    bsSize="lg"
                                    type="text"
                                    name="companyName"
                                    placeholder="Company Name"
                                    value={companyNameVal}
                                    onChange={onChangecompanyNameVal}
                                />
                            </FormGroup>
                        </Col>
                        <Col xs={6} md={6}>
                            <FormGroup>
                                <select className="custom-select ShareModal_input"
                                        style={{ background:'none',appearance:'auto',height: '2.3rem',padding:' 0rem 0.5rem',lineHeight: '0.5rem',borderRadius: '10px',border: '1px solid #ced4da'}}
                                        onChange={onChangepersonVal}
                                        value={personVal}
                                >
                                    <option value="0">This person is my</option>
                                    <option value="Manager">Manager</option>
                                    <option value="Peer">Peer</option>
                                    <option value="Member of my team">Member of my team</option>
                                    <option value="Industry Colleague">Industry Colleague</option>
                                </select>
                            </FormGroup>
                        </Col>
                        <Col xs={12} md={12}>
                            <FormGroup>
                            <Input
                                className="form-control ShareModal_input"
                                bsSize="lg"
                                type="textarea"
                                name="companyName"
                                placeholder=""
                                style={{minHeight:'220px'}}
                                value={textAreaVal}
                                onChange={onChangetextAreaVal}
                            />
                            </FormGroup>
                        </Col>
                    </Row>
                    <hr className="mx-auto"
                    style={{display: 'block',width: '92%',margin:'0',border: '2px #0071B8 solid'}}
                    />
                   
                </ModalBody>
                <ModalFooter style={{borderTop: 'none',padding: '0.75rem 3rem',marginBottom:'0.8rem'}}>
                    <button onClick={handleCancel} style={{width:"auto",flex:'none',backgroundColor:'#ffffff',color:"#000000",borderRadius:"6px",fontWeight:"400",border:"1px #D5D5D5 solid",height:"32px",padding: '0 0.7rem'}}>
                        Cancel
                    </button>
                    <Button
                        color="primary"
                        className="shadow-sm mr-1"
                        onClick={share}
                        style={{maxWidth: '116px',height:"32px",borderRadius:"6px"}}
                    >
                        Share
                    </Button>
                </ModalFooter>
            </Modal>
            <Container fluid className="p-0">
                <Row className="mb-2 mb-xl-4">
                    <Col xs="auto" className="d-none d-sm-block">
                        <h2>Welcome to your Dashboard</h2>
                    </Col>
                </Row>

                <Row gutter={[16, 24]}>
                    <Col xs={12} md={6} xl={3}>
                        <Card className="flex-fill bg-primary text-white mb-0" style={{ height: '89%', overflow: "hidden" }}>
                            <CardBody className="py-4" style={{ paddingBottom: '0' }}>
                                <Media>
                                    <Media body>
                                        <h5 className="mb-2 text-white">Welcome, </h5>
                                        <h1 className="text-white" style={{ fontSize: '40px'}}>{currentUser.FirstName}</h1>
                                        <div className="mb-0" style={{ fontSize: '20px'}}>
                                            It’s a good day for brilliant things! 
                                        </div>
                                    </Media>
                                </Media>
                            </CardBody>
                        </Card>
                    </Col>
                    <Col xs={12} md={6} xl={3}>
                        <Card className="flex-fill mb-0" style={{ height: '89%', overflow: "hidden",cursor: 'pointer'}} onClick={() => { props.history.push({ pathname: "/Assessments" })}}>
                            <CardBody className="py-4" style={{ textAlign: 'right' }}>
                                <Media style={{ flexDirection: 'column', color: '#28A745' }}>
                                    <div style={{ fontSize: '16px' ,width:'100%'}}>
                                        {(currentUser.roleName == 'company'||currentUser.roleName == 'super-admin'||currentUser.roleName == 'partner')? 'Total ':'Your Total ' }Completed<br></br> Assessments
                                        </div>
                                    <div style={{ fontSize: '56px', fontWeight: '600', width: "100%", color: '#93D3A2', lineHeight: '47px', display: 'inline-block', textAlign: "left", marginTop: '1rem' }}>{CompletedNumber}</div>
                                </Media>
                                <img src={dashboard_1} alt="" />
                            </CardBody>
                        </Card>
                    </Col>
                    <Col xs={12} md={6} xl={3}>
                        <Card className="flex-fill mb-0" style={{ height: '89%', overflow: "hidden",cursor: 'pointer'}}onClick={() => { props.history.push({ pathname: "/Assessments" })}}>
                            <CardBody className="py-4" style={{ textAlign: 'right' }}>
                                <Media style={{ flexDirection: 'column', color: '#000000' }}>
                                    <div style={{ fontSize: '16px',width:'100%' }}>
                                    {(currentUser.roleName == 'company'||currentUser.roleName == 'super-admin'||currentUser.roleName == 'partner')? 'Total ':'Your Total ' }Open<br></br> Assessments
                                        </div>
                                    <div style={{ fontSize: '56px', fontWeight: '600', width: "100%", lineHeight: '47px', display: 'inline-block', textAlign: "left", marginTop: '1rem' }}>{OpenNumber}</div>
                                </Media>
                                <img src={dashboard_2} alt="" />
                            </CardBody>
                        </Card>
                    </Col>
                    <Col xs={12} md={6} xl={3}>
                        <Card className="flex-fill mb-0" style={{ height: '89%', overflow: "hidden",cursor: 'pointer'}}onClick={() => { props.history.push({ pathname: "/Assessments" })}}>
                            <CardBody className="py-4" style={{ textAlign: 'right' }}>
                                <Media className="theme_color1" style={{ flexDirection: 'column' }}>
                                    <div style={{ fontSize: '16px',width:'100%' }}>
                                    {(currentUser.roleName == 'company'||currentUser.roleName == 'super-admin'||currentUser.roleName == 'partner')? 'Total ':'Your Total ' }In-Progress<br></br> Assessments
                                        </div>
                                    <div style={{ fontSize: '56px', fontWeight: '600', width: "100%", lineHeight: '47px', display: 'inline-block', textAlign: "left", marginTop: '1rem' }}>{Inprogress}</div>
                                </Media>
                                <img src={dashboard_3} alt="" />
                            </CardBody>
                        </Card>
                    </Col>

                    {/*
            !! Credit Balance: !!

            This needs to be moved to the Header at a later stage
          */}
                    {/* <Col md="6" xl className="mb-4">
                        {currentUser.roleName === "partner" ||
                        currentUser.roleName === "company" ? (
                            <Card className="flex-fill h-100">
                                <CardBody className="py-4">
                                    <Media className="align-items-center">
                                        <img src={imgCoin} className={"mr-3"}/>
                                        <Media body className="text-white">
                                            <h4 className="font-weight-bold">Balance : {credits} </h4>
                                        </Media>
                                    </Media>
                                </CardBody>
                                <hr className="my-0"/>
                            </Card>
                        ) : (
                            <card></card>
                        )}
                    </Col> */}

                    <Col xs={12} md={6} lg={6} xl={6}>

                        <Card className="scrollbar2 flex-fill" style={{ minHeight: '89%', overflow: "hidden",cursor: 'pointer'}} onClick={() => { props.history.push({ pathname: "/helpCenter" })}}>
                            <CardBody className="flex-fill">
                                <div style={{ display: 'flex' }}>
                                    <div style={{ color: '#6C757D' }} className="mr-5">
                                        <p style={{ fontSize: '16px', fontWeight: '700' }}>Help Center</p>
                                        <div style={{ fontSize: '16px' }}>
                                            Have a specific question or need personalised support? Reach out to our dedicated support team through our Help Center. We're committed to providing timely and helpful assistance to address your concerns and ensure a seamless user experience.
                                        </div>
                                    </div>
                                    <div>
                                        <img style={{ width: '76px' }} src={dashboard_5} alt="" />
                                    </div>
                                </div>
                            </CardBody>
                        </Card>
                    </Col>
                    {(currentUser.roleName == 'company' || currentUser.roleName == 'team-leader' || currentUser.roleName == 'partner') && <Col xs={6} md={6} xl={3}>
                        <Card className="flex-fill" style={{ minHeight: '89%', overflow: "hidden",cursor: 'pointer'}}>
                            <CardBody >
                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <div className="display-4 font-weight-bold theme_color1">{CreditsNumber}</div>
                                    <div>
                                        <img style={{ width: '76px' }} src={dashboard_4} alt="" />
                                    </div>
                                </div>
                                <div style={{ textAlign: 'left', fontSize: '30px', color: '#6C757D' }}>
                                    <div style={{ fontSize: '22px' }}>Assessment</div>
                                    <div>Credits</div>
                                </div>

                            </CardBody>
                        </Card>
                    </Col>}
                    {<Col xs={6} md={6} xl={3}>
                        <Card className="flex-fill" style={{ minHeight: '89%', overflow: "hidden",cursor: 'pointer'}} onClick={()=> showModal(0)}>
                            <CardBody >
                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ textAlign: 'left', fontSize: '30px', color: '#6C757D' }}>
                                    <div style={{ fontSize: '32px',color:"var(--theme_color2)",fontWeight:'bold' }}>Share</div>
                                    <div style={{ fontSize: '16px',paddingRight:'10px'}}>Share this helpful<br></br> capability analysis<br></br> with a colleage or peer</div>
                                </div>
                                    <div>
                                        <img style={{ width: '76px' }} src={dashboard_7} alt="" />
                                    </div>
                                </div>
                            </CardBody>
                        </Card>
                    </Col>}

                    {(currentUser.roleName == 'company' || currentUser.roleName == 'team-leader' || currentUser.roleName == 'super-admin' || currentUser.roleName == 'partner') && <Col xs={6} md={6} xl={3}>
                        <Card className="flex-fill" style={{ minHeight: '89%', overflow: "hidden",overflow: 'hidden' }}>
                            <CardBody>
                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <div className="display-4 font-weight-bold" style={{ color: '#93D3A2' }}>{RegistrationsNumber}</div>
                                    <div>
                                        <img style={{ width: '76px' }} src={dashboard_6} alt="" />
                                    </div>
                                </div>
                                <div style={{ textAlign: 'left', fontSize: '30px', color: '#6C757D' }}>
                                    <div style={{ fontSize: '22px' }}>This weeks </div>
                                    <div>New Registrations</div>
                                </div>

                            </CardBody>
                        </Card>
                    </Col>}



                    {(currentUser.roleName == 'company' || currentUser.roleName == 'team-leader' || currentUser.roleName == 'super-admin' || currentUser.roleName == 'partner') &&
                        <Col xs={12} md={6} className="mb-4">
                            <Card className="flex-fill h-100" style={{ minHeight: '89%', overflow: "hidden",overflow: "hidden" }}>
                                <CardBody style={{ padding: '0' }}>
                                    <div style={{ display: 'flex', padding: "1.25rem", paddingBottom: "0", justifyContent: 'space-between' }}>
                                        <span>Total Assessment Usage</span>
                                        <div style={{ textAlign: 'right' }}>
                                            <RangePicker style={{ width: '14rem', height: '1.5rem', marginBottom: '0.5rem' }}
                                                onChange={(dates, dateStrings) => { AssessmentCompleteDatehandleChange(dateStrings) }}
                                                defaultValue={[dayjs().add(-1, "M"), dayjs()]}
                                            />
                                            <br />
                                            <Select
                                                style={{
                                                    width: 100,
                                                    textAlign: 'center'
                                                }}
                                                placeholder="Client"
                                                size="small"
                                                onChange={(val) => { AssessmentCompleteValuehandleChange(val) }}
                                                value={CompanySelectedOption}
                                                options={CompanyOptionsData}
                                            />
                                        </div>
                                    </div>
                                    <Media>
                                        <Media body>
                                            <Table striped borderless>
                                                <thead>
                                                    <tr>
                                                        <th width="20%">
                                                            Assessment<br></br>Short Name
                                                        </th>
                                                        <th width="20%">
                                                            Users
                                                        </th>
                                                        <th>
                                                            %Completion
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {AssessmentCompletePercentTableDatas.map((item,i) => {
                                                        return (
                                                            <tr key={i}>
                                                                <td>
                                                                    {item.AssessmentShortName}
                                                                </td>
                                                                <td>
                                                                    {item.TotalAssessments}
                                                                </td>
                                                                <td>
                                                                    <Progress
                                                                        className="my-2"
                                                                        value={item.Percent}
                                                                    >
                                                                        {item.Percent === 0 ? '0%' : (item.Percent + '%')}
                                                                    </Progress>
                                                                </td>
                                                            </tr>
                                                        )
                                                    })
                                                    }
                                                </tbody>
                                            </Table>
                                        </Media>
                                    </Media>
                                </CardBody>
                            </Card>
                        </Col>}

                    {(currentUser.roleName == 'super-admin' || currentUser.roleName == 'partner') && <Col xs={12} md={6} className="mb-4">
                        <Card className="flex-fill h-100" style={{ minHeight: '89%', overflow: "hidden",overflow: "hidden" }}>
                            <CardBody style={{ padding: '0' }}>
                                <div style={{ display: 'flex', padding: "1.25rem", paddingBottom: "0", justifyContent: 'space-between' }}>
                                    <span>Clients</span>
                                    <div style={{ textAlign: 'right' }}>
                                        <RangePicker style={{ width: '14rem', height: '1.5rem', marginBottom: '0.5rem' }}
                                            defaultValue={[dayjs().add(-1, "M"), dayjs()]}
                                            onChange={(dates, dateStrings) => { ClientsTableDatehandleChange(dateStrings) }}
                                        />
                                    </div>
                                </div>
                                <Media>
                                    <Media body>
                                        <Table borderless>
                                            <thead>
                                                <tr>
                                                    <th width="15%" style={{ paddingTop: '0' }}>

                                                    </th>
                                                    <th width="35%" style={{ paddingTop: '0' }}>

                                                    </th>
                                                    <th width="25%" style={{ fontSize: '12px', fontWeight: '500', textAlign: "center", paddingTop: '0' }}>
                                                        Credits used
                                                    </th>
                                                    <th width="25%" style={{ fontSize: '12px', fontWeight: '500', textAlign: "center", paddingTop: '0' }}>
                                                        Number of Users
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {ClientsTableDatas.map((client,i) => {
                                                    return (
                                                        <tr key={i}>
                                                            <td>
                                                                {client.CompanyLogo !== '' ? <div style={{ width: '3rem', marginRight: '1rem', display: 'inline-block' }}>
                                                                    <img src={client.CompanyLogo} alt="Logo" style={{ width: '100%' }} />
                                                                </div> : <div></div>
                                                                }
                                                            </td>
                                                            <td>
                                                                {client.CompanyName}
                                                            </td>
                                                            <td style={{ textAlign: "center" }}>
                                                                {client.CreditUsed}
                                                            </td>
                                                            <td style={{ textAlign: "center" }}>
                                                                {client.NumberOfUsers}
                                                            </td>
                                                        </tr>
                                                    )
                                                })}
                                            </tbody>
                                        </Table>
                                    </Media>
                                </Media>
                            </CardBody>
                        </Card>
                    </Col>}


                    {currentUser.roleName == 'company' && <Col xs={6}>
                    {/* {<Col xs={6}> */}
                        <Card className="flex-fill" style={{ minHeight: '89%', overflow: "hidden", }}>
                            <CardBody className="py-4">
                                <Media>
                                    <Media body>
                                        <MultitypeChart chartData={chartdatas} />
                                    </Media>
                                </Media>
                            </CardBody>
                        </Card>
                    </Col>}
                </Row>
            </Container>
        </div>
    );
};
export default Default;
